<template>
	<div class="productinfo-box">
		<div class="pattr-box">
			<el-row>
				<el-col :span="4" style="text-align: right;">属性类型：</el-col>
				<el-col :span="20">
					<el-select @change="attrCatChangeHandler" v-model="product.productAttributeCategoryId" placeholder="请选择" size="small">
						<el-option v-for="item in attrCategoryList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品规格：</el-col>
				<el-col :span="20" style="background-color: #F8F9FC;border-radius: 5px;padding:10px;min-height:40px;border:1px solid #ccc;">
					<div v-for="(item,index) in attrPropList">
						<span>{{item.name}}</span>
						<template v-if="item.inputList">
							<el-checkbox-group v-model="checkList[index]">
								<template v-for="item2 in item.inputList.split(',')">
									<el-checkbox :label="item2"></el-checkbox>
								</template>
							</el-checkbox-group>
						</template>
						<template v-else>
							<div>
								<el-checkbox-group v-model="checkList[index]">
									<template v-for="item3 in checkList2Items">
										<el-checkbox :label="item3"></el-checkbox>
									</template>
								</el-checkbox-group>
								<el-input placeholder="请输入内容" v-model="input" size="mini" style="width:130px" clearable>
								</el-input>
								<el-button @click="handleAdd" size="mini">新增</el-button>
							</div>
						</template>

					</div>
					
					
					
				</el-col>
			</el-row>
			
	
			<el-row>
				<el-col :span="4" style="text-align: right;color:#fff;"> 1</el-col>
				<el-col :span="20" style="background-color: #F8F9FC;border-radius: 5px;padding:10px;min-height:40px;border:1px solid #ccc;">
					<el-table :data="product.skuStockList" border style="width: 100%;margin-top:20px;">
						<!-- 加入属性 -->
						<template v-if="attrPropList.length>0">
							<template v-for="(item,index) in attrPropList">
								<el-table-column :label="item.name">
									<!-- 当前行sku的值 -->
									<template v-slot="s">
										{{s.row.spData[index].value}}
									</template>
									<!-- {{skuData[index].value}} -->
								</el-table-column>
							</template>
						</template>
					
						<el-table-column label="销售价格">
							<template v-slot="data">
								<el-input v-model="data.row.price"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="商品库存">
							<template v-slot="data">
								<el-input v-model="data.row.stock"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="库存预警值">
							<template v-slot="data">
								<el-input v-model="data.row.lowStock"></el-input>
							</template>
						</el-table-column>
					
					</el-table>
					
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="color:#fff;">1</el-col>
				<el-col :span="20">
					<el-button type="primary" size="mini" @click="flushList">刷新列表</el-button>
					<el-button type="primary" size="mini">同步价格</el-button>
					<el-button type="primary" size="mini">同步库存</el-button>
				</el-col>
			</el-row>
					
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			<el-row>
				<el-col :span="4" style="text-align: right;">商品参数：</el-col>
				<el-col :span="20" style="background-color: #F8F9FC;border-radius: 5px;padding:10px;min-height: 40px;">
					<template v-for="(item,index) in attrCatList">
						<el-row>
							<el-col :span="6">{{item.name}}</el-col>
							<el-col :span="18">
								<template v-if="item.inputList">
									<el-select size="mini" v-model="product.productAttributeValueList[index].value">
										<el-option v-for="item2 in item.inputList.split(',')" :label="item2" :value="item2"></el-option>
									</el-select>
								</template>
								<template v-else>
										<el-input size="mini" v-model="product.productAttributeValueList[index].value"></el-input>
								</template>
								<!--  -->
							
							</el-col>
						</el-row>
					</template>

				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品相册：</el-col>
				<el-col :span="20">
					<el-upload action="http://localhost:8888/download/" list-type="picture-card" ref="upload" :on-change="handlechange"
					 :file-list="filelist" :auto-upload="false">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="file" slot-scope="{file}">
							<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
									<i class="el-icon-download"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
									<i class="el-icon-delete"></i>
								</span>
							</span>
						</div>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="product.pic" alt="">
					</el-dialog>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">规格参数：</el-col>
				<el-col :span="20">
					<el-tabs v-model="activeName" type="card">
						<el-tab-pane label="电脑端详情" name="abc">
							<div id="div888"></div>
						</el-tab-pane>
						<el-tab-pane label="移动端详情" name="second">
							<div id="div999"></div>
						</el-tab-pane>
					</el-tabs>
				</el-col>
			</el-row>
		</div>
		<div class="btn-box">
			<el-button size="small" type="primary" @click="$emit('input',1)">上一步，填写促销信息</el-button>
			<el-button size="small" type="primary" @click="stepNext">下一步，填写商品关联</el-button>
		</div>
	</div>
</template>

<script>
	// 引入编辑器
	import E from 'wangeditor'


	import {
		getProductAttrCatList,
		getProductAttrListByCat
	} from '@/api/productAttr.js'
	export default {
		props: ['value', 'product'],
		data() {
			return {
				attrCategoryList: [],
				attrCatList: [],
				attrPropList: [],
				dialogVisible: false,
				disabled: false,
				editor: '',
				editor2: '',
				activeName: "abc",
				filelist: [],
				checkList: [[],[],[],[],[],[]],
				checkList2Items: [],
				input: '',
				skuDataFilter:[],
				skuData:[]
			}
		},
		mounted() {
			this.editor = new E('#div888')
			this.editor.create()
			this.editor.txt.html("电脑端详情")

			this.editor2 = new E('#div999')
			this.editor2.create()
			this.editor2.txt.html("移动端详情")

			getProductAttrCatList().then(r => {
				this.attrCategoryList = r.data;
				console.log("rrr", r.data);
			})
		},
		methods: {
			stepNext() {
				//在点击下一步的时候，获取富文本编辑器里面的内容，给到product
				this.product.detailHtml = this.editor.txt.html();
				this.product.detailMobileHtml = this.editor2.txt.html();

				this.$emit('input', 3);
				this.product.detailHtml = this.editor.txt.html();
			},
			attrCatChangeHandler() {
				let id = this.product.productAttributeCategoryId;


				//发送请求获取属性列表
				getProductAttrListByCat(id, {
					pageNum: 1,
					pageSize: 100,
					type: 0
				}).then(r => {
					this.attrPropList = r.data.list;
					console.log(r);
				})


				// 查询该属性分类对应的参数列表或者属性列表
				this.product.productAttributeValueList = []
				getProductAttrListByCat(id, {
					pageNum: 1,
					pageSize: 100,
					type: 1
				}).then(r => {
					this.attrCatList = r.data.list;
					console.log(this.attrCatList);
					r.data.list.forEach(item=>{
						let dddx={ //商品参数集合
						"id": 0,
						"productAttributeId": item.id, //商品参数id
						"productId": 0, //商品id
						"value": "" //参数内容
					}
						this.product.productAttributeValueList.push(dddx);
					})
					
					
				})
			},
			handlechange(file, fileList) {
				// console.log("file",file);
				// console.log("fileList",fileList);
				let url = '';
				if (fileList.length > 0) {
					this.product.pic = fileList[0].url;

					fileList.forEach(i => {
						url = url + i.url + ",";
					})
				}
				url = url.substr(0, url.length - 1);

				this.product.albumPics = url;

				// this.$refs.upload.submit();
			},
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
			handleAdd(){
				// checkList2Items: [],
				// input: '',
				this.checkList2Items.push(this.input);
				this.input = ""
			},
			flushList(){
				this.product.skuStockList = [];
				//获取选中的属性列表
				//循环选中的属性列表   [[3,4,5],[1,2,3]]
				//将值添加到skuData中去    product.skuStockList  []    {spData:[{"颜色":"金色"},{“容量":"18G"}]}     
				this.checkList = this.checkList.filter(item=>{
					return item.length>0;
				})
				let narr=[];
				let arr = [];    //skuData   [[{"颜色":"红色"},{"容量":"12G"}],[{"颜色":"红色"},{“容量":"24G"}]]
								// checkList  [["红色",“黄色"]，[”12G“，”24G“]]
				for(let i=0;i<this.checkList.length;i++){
					let one = this.checkList[i];
					if(arr.length==0){
						//第一次直接装
						for(let k = 0;k<one.length;k++){
							let n = {}
							// n[this.attrPropList[i].name] = one[k];
							n['value'] = one[k];
							arr.push([n]);
						}
					}else{
						for(let x=0;x<one.length;x++){
							for(let y=0;y<arr.length;y++){
								let zz = {}
								// zz[this.attrPropList[i].name] = one[x];
								zz['value'] = one[x];
								console.log("arr[y]:",arr[y]);
								console.log("zz:",zz);
								let nnn = JSON.parse(JSON.stringify(arr[y]));
								nnn.push(zz);
								narr.push(nnn);
							}
						}
					}
				}
				console.log("arr...:",arr)
				console.log("narr...",narr);
				narr.forEach(item=>{
					let dx = { //商品的sku库存信息
						"id": 0,
						"lockStock": 0,
						"lowStock": 0,
						"pic": "string",
						"price": 0,
						"productId": 0,
						"promotionPrice": 0,
						"sale": 0,
						"skuCode": "string",
						"spData": item,
						"stock": 0
					}
					
					this.product.skuStockList.push(dx);
				})
				
			}
		}
	}
	
	
	// let cp = JSON.parse(JSON.stringify(arr))
	// for(let k=0;k<one.length;k++){
	// 	cp.forEach(it=>{
	// 		arr.push(it)
	// 	})
	// }
</script>

<style lang="scss">
	.productinfo-box {
		.btn-box {
			text-align: center;
		}
	}

	.pattr-box {
		margin-top: 50px;

		.el_input {
			height: 32px;

			.el_input__inner {
				height: 32px !important;
			}
		}

		.el-row {
			margin: 20px;
			line-height: 32px;
		}
	}
</style>
